// 实现这个项目的构建任务
const { src, dest, series, parallel, watch } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync').create()
const plugin = loadPlugins()

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}
const paths = {
  style: 'src/assets/styles/*.scss',
  script: 'src/assets/scripts/*.js',
  html: 'src/*.html',
  image: 'src/assets/images/**',
  font: 'src/assets/fonts/**',
  extra: 'public/**',
}
const clean = () => {
  return del(['dist', 'temp'])
}
const complete = () => {
  return del(['temp'])
}
const style = () => {
  return src(paths.style, { base: 'src' })
    .pipe(plugin.sass())
    .pipe(dest('temp'))
    .pipe(browserSync.reload({ stream: true }))
}
const script = () => {
  return src(paths.script, { base: 'src' })
    .pipe(plugin.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(browserSync.reload({ stream: true }))
}
const html = () => {
  return src(paths.html, { base: 'src' })
    .pipe(plugin.swig({ data, cache: false }))
    .pipe(dest('temp'))
    .pipe(browserSync.reload({ stream: true }))
}
const image = () => {
  return src(paths.image, { base: 'src' })
    .pipe(plugin.imagemin())
    .pipe(dest('dist'))
}
const font = () => {
  return src(paths.font, { base: 'src' })
    .pipe(plugin.imagemin())
    .pipe(dest('dist'))
}
const extra = () => {
  return src(paths.extra, { base: 'public' })
    .pipe(dest('dist'))
}
const useref = () => {
  return src('temp/*.html', { base: 'temp' })
    .pipe(plugin.useref({ searchPath: ['temp', '.'] }))
    .pipe(plugin.if(/\.js$/, plugin.uglify()))
    .pipe(plugin.if(/\.css$/, plugin.cleanCss()))
    .pipe(plugin.if(/\.html$/, plugin.htmlmin({
      minifyCSS: true,
      minifyJS: true,
      collapseWhitespace: true
    })))
    .pipe(dest('dist'))
}
const delelop = () => {
  watch(paths.style, style)
  watch(paths.script, script)
  watch(paths.html, html)
  watch([
    paths.image,
    paths.font,
    paths.extra,
  ], browserSync.reload)
  browserSync.init({
    notify: false,
    port: 8080,
    open: false,
    server: {
      baseDir: ['temp', 'src', 'public'],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}
const compile = parallel(style, script, html)
const serve = series(clean, compile, delelop)
const build = series(clean, parallel(series(compile, useref), clean, image, font, extra), complete)
module.exports = {
  clean,
  serve,
  build
}